<template>
  <a-modal
    :visible="localVisible"
    title="添加章节"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form :model="chapterForm">
      <a-form-item label="章节名称">
        <a-input v-model:value="chapterForm.name" />
      </a-form-item>
      <a-form-item label="章节描述">
        <a-input v-model:value="chapterForm.description" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
export default {
  name: "AddChapterModal",
  props: {
    visible: { type: Boolean, default: false }
  },
  data() {
    return {
      chapterForm: { name: "", description: "" }
    };
  },
  computed: {
    localVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    }
  },
  methods: {
    handleOk() {
      if (this.chapterForm.name.trim()) {
        this.$emit("add-chapter", { ...this.chapterForm });
        this.chapterForm = { name: "", description: "" };
        this.localVisible = false;
      } else {
        alert("章节名称不能为空！");
      }
    },
    handleCancel() {
      this.localVisible = false;
    }
  }
};
</script>
